<!DOCTYPE html>
<html lang="en">
<head>
    {% block head %}
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% endblock %}
</head>
<body>
    {% block body %} 
    <div class="content">
        {% with msg=get_flashed_messages() %}
        {% if msg %}
        {% for message in msg %}
        {{ message }}
        <br />
        {% endfor %}
        {% endif %}
        {% endwith %}
        <h1>To-Do List</h1>
        <br />
        <form action="/" method="POST">
            <input type="text" name="content" id="content">
            <input type="submit" value="Add Task">
        </form>
        <br />
        <table class="table table-striped table-hover table-bordered table-sm">
            {% if tasks %}
            <tr>
                <th style="width: 200px"> Task </th>
                <th style="width: 100px"> Added </th>
                <th style="width: 100px"> Actions </th>
            </tr>
            {% for task in tasks %}
            <tr>
                <td> {{ task.content }} </td>
                <td> {{ task.date_created.date() }} </td>
                <td>
                    <a href="/delete/{{ task.id }}">Delete</a>
                    <br>
                    <a href="" data-toggle="modal" data-target="#modifyTask" id="modify{{ task.id }}">Update</a>
                </td>
            </tr>
            <script>
                $('#modify{{ task.id }}').click(function()
                      {
                        $('#modifyForm').attr('action', 'http://localhost:5000/modify/{{ task.id }}');
                        $('#modifyTask').modal();
                      });
            </script>
            {% endfor %}
            {% else %}
            No items in list
            {% endif %}
        </table>
        <br />
        <br />
    </div>
    <div class="modal fade" id="modifyTask" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLongTitle">Update Task</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <form id="modifyForm" method="POST">
                <div class="form-group-row">
                  <label class="col-form-label">Enter updated task:</label>
                  <input type="text" name="content" class="form-control">
                </div>
                <br />
                <div class="modal-footer">
                  <button type="submit" class="btn btn-primary">Enter</button>
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    {% endblock %}
</body>
</html>
